    <div class="row">
		  <div class="col-xs-6 col-md-3">
		    
		  </div>
		  <div class="col-xs-6 col-md-9">
		  		<button onclick="host_add();" class="btn btn-success pull-right">新增</button>
		  </div>
		</div>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>排序</th>
                  <th>域名</th>
                  <th>联系邮箱</th>
                  <th width="150">操作</th>
                </tr>
              </thead>
              <tbody>
              	<?php foreach ($list as $item):?>
                  <tr id="host_<?=$item['id']?>">
                      <td><input class="host_sort" style="border:none" host_id="<?=$item['id']?>" host_mark="<?=$item['order']?>" type="number" value="<?=$item['order']?>" min=0 max=1000 /></td>
                      <td><?=$item['name']?></td>
                      <td><?=$item['email']?></td>
                      <td>
                          <div class="btn-group" role="group" aria-label="...">
                            <button type="button" onclick="host_edit(<?=$item['id']?>);" class="btn btn-primary btn-sm">编辑</button>
                            <button type="button" onclick="host_delete(<?=$item['id']?>);" class="btn btn-danger btn-sm">删除</button>
                          </div>
                      </td>
                  </tr>
              <?php endforeach;?>
              </tbody>
            </table>
          </div>
    
 <script type="text/javascript">
$(function(){
    $('.host_sort').blur(function(){
      var input = $(this);
      var newVal = input.val();
      var oldVal = input.attr('host_mark');
      var id = input.attr('host_id');
      if(newVal!=oldVal){
        var loading = layer.load(1, {
          shade: [0.5,'#000']
        });
        $.post('',{order:newVal,id:id},function(result){
          layer.close(loading);
          if(result.statu=='ok'){
            location.reload();
          }else{
            layer.msg(result.message, {icon: 2});
            input.val(oldVal);
          }
        },'json')
      }
    })
 })

function host_delete(id){
  var confirm = layer.confirm('确定删除？', {
    btn: ['确定','取消'] //按钮
  }, function(){
    layer.close(confirm);
    var loading = layer.load(1, {
      shade: [0.5,'#000']
    });
    $.post('',{id:id},function(result){
      layer.close(loading);
      if(result.statu=='ok'){
        location.reload();
      }else{
        layer.msg(result.message, {icon: 2});
      }
    },'json')
  });
}
function host_form(data){
  if(!data) data = {name:'',email:''};
  var html = '<form id="host_form">';
  if(data.id) html+='<input type="hidden" name="id" value="'+data.id+'" />';
  html+=makeInput({name:'name',label:'域名',value:data.name});
  html+=makeInput({name:'email',label:'联系邮箱',value:data.email});
  html+='</form>';
  return html;
}

function host_edit(id){
  var $td = $('#host_'+id).children('td');
  var data = {id:id};
  data.name = $td.eq(1).text();
  data.email = $td.eq(2).text();
  var html = host_form(data);
  $.alert('修改域名',html,function(modal){
    var formData = $("#host_form").serializeJson();
    formData.name = $.trim(formData.name);
    formData.email = $.trim(formData.email);
    if(!checkUrl(formData.name)){
      $('#alert_form_name').formTip('域名不合法','error',false);
      return
    }
    if(formData.email.length<1||formData.email.length>40){
      $('#alert_form_email').formTip('邮箱长度为1-40！','error',false);
      return
    }
    var loading = layer.load(1, {
      shade: [0.5,'#000']
    });
    $.post('',formData,function(result){
      if(result.statu=='ok'){
        location.reload()
      }else{
        layer.close(loading);
        layer.msg(result.message, {icon: 2});
      }
    })
    modal.modal('hide');
  },function(modal){
    modal.modal('hide');
  });  
}
function host_add(){
  var html = host_form();
  $.alert('修改域名',html,function(modal){
    var formData = $("#host_form").serializeJson();
    formData.name = $.trim(formData.name);
    formData.email = $.trim(formData.email);
    if(!checkUrl(formData.name)){
      $('#alert_form_name').formTip('域名不合法','error',false);
      return
    }
    if(formData.email.length<1||formData.email.length>40){
      $('#alert_form_email').formTip('邮箱长度为1-40！','error',false);
      return
    }
    var loading = layer.load(1, {
      shade: [0.5,'#000']
    });
    $.post('',formData,function(result){
      if(result.statu=='ok'){
        location.reload()
      }else{
        layer.close(loading);
        layer.msg(result.message, {icon: 2});
      }
    })
    modal.modal('hide');
  },function(modal){
    modal.modal('hide');
  });  
}

function host_add1(){
  var prompt = layer.prompt({title: '请输入域名', formType: 0}, function(text, index){
    if(!checkUrl(text)){
      layer.msg('域名不合法', {icon: 2});
      return;
    }
    layer.close(prompt);
    var loading = layer.load(1, {
      shade: [0.5,'#000']
    });

    $.ajax({
        url: text+'/api/upload/pass.html',
        type: 'GET',
        complete: function(response){
            if(response.status == 200){
                $.post('',{name:text},function(result){
                  layer.close(loading);
                  if(result.statu=='ok'){
                    location.reload();
                  }else{
                    layer.msg(result.message, {icon: 2});
                  }
                },'json')
            }else{
              layer.close(loading);
              layer.msg('无法连接该域名,请检查是否解析', {icon: 2});
            }
        }
    });
    
  });
}
function checkUrl(url) {  
    if(url.substr(url.length-1,1)=='/') return false;
    var reg = /(([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig;  
    return reg.test(url);  
}
</script>
        